<template>  
    <div class="frist">  
      <p>请输入一个数字n:</p>  
      <input v-model.number="n" type="number" placeholder="输入数字">  
      <button @click="calculateOddSum">计算奇数和</button>  
      <p>1到{{ n }}的奇数和是: {{ oddSum }}</p>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    props: ['oddSum'],  
    data() {  
      return {  
        n: null  
      };  
    },  
    methods: {  
      calculateOddSum() {  
        if (this.n === null || this.n % 1 !== 0 || this.n < 1) {  
          alert('请输入一个正整数！');  
          return;  
        }  
        let sum = 0;  
        for (let i = 1; i <= this.n; i++) {  
          if (i % 2 !== 0) {  
            sum += i;  
          }  
        }  
        this.$emit('update:oddSum', sum);  
      }  
    }  
  };  
  </script>  
    
  <style scoped>  
  p {  
    margin-bottom: 5px;  
  }  
    
  input[type="number"] {  
    width: 100px;  
  }  
  .frist{
    height: 150px;
    width: 300px;
  }
  </style>